<template>
    <el-form 
        class="field-form" 
        :model="formConfig" 
        label-width="100px" 
        size="default" 
        label-position="left" 
        @submit.prevent
    >
        <el-collapse v-model="state.fieldCollapse" >
            <el-scrollbar :height="scrollerHeight">
                <el-collapse-item title="基础设置" name="1">
                    <template v-for="(editorName, propName) in COMMON_PROPERTIES">
                        <component 
                            v-if="hasPropEditor(propName, editorName)" 
                            :is="getPropEditor(propName, editorName)"
                            :designer="designer"
                            :form-config="formConfig"
                            :select-widget="selectWidget"
                            :option-model="optionModel"
                        />
                    </template>
                </el-collapse-item>
                <el-collapse-item title="高级设置" name="2">
                    <template v-for="(editorName, propName) in ADVANCED_PROPERTIES">
                        <component 
                            v-if="hasPropEditor(propName, editorName)" 
                            :is="getPropEditor(propName, editorName)"
                            :designer="designer"
                            :form-config="formConfig"
                            :select-widget="selectWidget"
                            :option-model="optionModel"
                        />
                    </template>
                </el-collapse-item>
                <el-collapse-item title="事件绑定" name="3">
                    <template v-for="(editorName, propName) in EVENT_PROPERTIES">
                        <component 
                            v-if="hasPropEditor(propName, editorName)" 
                            :is="getPropEditor(propName, editorName)"
                            :designer="designer"
                            :form-config="formConfig"
                            :select-widget="selectWidget"
                            :option-model="optionModel"
                            />
                    </template>
                </el-collapse-item>
            </el-scrollbar>
        </el-collapse>
    </el-form>
</template>

<script setup>
import { computed, getCurrentInstance, inject, reactive,watch } from 'vue';
import {COMMON_PROPERTIES,ADVANCED_PROPERTIES,EVENT_PROPERTIES} from './properties.js'

const props = defineProps({
    formConfig:{
        type:Object,
        default:()=>({})
    },
    scrollerHeight:{
        type:String,
        default:()=>'0px'
    },
    designer:{
        type:Object,
        default:()=>({})
    },
    selectWidget:{
        type:Object,
        default:()=>({}) 
    }
})

const state = reactive({
    fieldCollapse:[],
})

const optionModel = computed(()=>{
    return props.selectWidget.options
})

const _this = getCurrentInstance()

const hasPropEditor = (propName, editorName)=>{
    if(!editorName || !props.selectWidget) return false //组件名不存在
    let originalPropName = propName.replace(props.selectWidget.type + '-', '')  //去掉组件名称前缀-，如果有的话！！
    // 根据当前组件配置项显示对应的组件
    // console.log(editorName,props.designer.hasConfig(props.selectWidget, originalPropName))
    return props.designer.hasConfig(props.selectWidget, originalPropName)
}

const getPropEditor = (propName, editorName)=>{
    let originalPropName = propName.replace(props.selectWidget.type + '-', '')  //去掉组件名称前缀-，如果有的话！！
    let ownPropEditorName = `${props.selectWidget.type}-${originalPropName}-editor`

    // console.log(_this.proxy.$options[ownPropEditorName]);
    // if(!_this.proxy.$options[ownPropEditorName]){ //局部注册组件
    //     return ownPropEditorName
    // }

    // 全局注册组件    
    return _this.proxy.$root.$.appContext.components[ownPropEditorName] ? ownPropEditorName : editorName
}

watch(
    ()=>props.selectWidget,
    ()=>{
        props.designer.saveCurrentHistoryStep()
    },
    {
        deep:true
    }
)
</script>

<style lang='scss' scoped>
:deep(.el-collapse-item){
    padding: 0 10px;
}
.setting-item{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin-bottom: 10px;
    .label {
        width: 80px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    .setting-item-content{
        flex:1;
    }
}
</style>